<template>
  <div class="page-container">
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card class="welcome-card-v2">
          <div class="welcome-content-v2">
            <div class="welcome-text-v2">
              <h2 class="animate__animated animate__fadeInDown">欢迎回来, {{ userStore.getUsername }}!</h2>
              <p class="animate__animated animate__fadeInUp">坤哥物流系统将与您共创高效物流新篇章。</p>
              <el-button type="primary" size="large" @click="$router.push('/user/orders')">
                开始寄件 <el-icon class="el-icon--right"><Ship /></el-icon>
              </el-button>
            </div>
            <div class="welcome-image-v2 animate__animated animate__fadeInRight">
              <img src="@/assets/images/wuliu2.svg" alt="Logistics Illustration" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="feature-cards-row">
      <el-col :span="8">
        <el-card class="feature-card-v2 icon-card-orders" @click="$router.push('/user/orders')">
          <div class="feature-content-v2">
            <div class="icon-wrapper">
              <el-icon><List /></el-icon>
            </div>
            <h3>我的订单</h3>
            <p>追踪、管理您的所有货运</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="feature-card-v2 icon-card-address" @click="$router.push('/user/address')">
          <div class="feature-content-v2">
            <div class="icon-wrapper">
              <el-icon><Location /></el-icon>
            </div>
            <h3>收货地址</h3>
            <p>轻松管理您的地址簿</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="feature-card-v2 icon-card-profile" @click="$router.push('/user/profile')">
          <div class="feature-content-v2">
            <div class="icon-wrapper">
              <el-icon><User /></el-icon>
            </div>
            <h3>个人信息</h3>
            <p>更新您的账户详情</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="latest-orders-row">
      <el-col :span="24">
        <el-card class="orders-card">
          <template #header>
            <div class="card-header">
              <span>最新订单</span>
              <el-button type="primary" link @click="$router.push('/user/orders')">
                查看全部
              </el-button>
            </div>
          </template>
          <el-table :data="recentOrders" style="width: 100%" v-loading="loading">
            <el-table-column prop="orderNumber" label="订单号" width="180" />
            <el-table-column prop="status" label="状态" width="120">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)" effect="dark">
                  {{ getStatusText(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="deliveryTime" label="配送时间" width="180" />
            <el-table-column prop="mudidi3" label="配送地址" />
            <el-table-column prop="zhongdian" label="送货目的地" />
            <el-table-column label="操作" width="120" fixed="right">
              <template #default="{ row }">
                <el-button type="primary" link @click="viewOrderDetail(row)">
                  <el-icon><View /></el-icon>查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 订单详情对话框 -->
    <el-dialog
      v-model="orderDetailDialogVisible"
      title="订单追踪"
      width="800px"
      :close-on-click-modal="false"
      class="order-detail-dialog-v3"
      top="10vh"
    >
      <div class="dialog-content">
        <el-steps :active="currentOrderDetail.status" finish-status="success" align-center class="order-timeline">
          <el-step title="待分配"></el-step>
          <el-step title="已分配"></el-step>
          <el-step title="配送中"></el-step>
          <el-step title="已完成"></el-step>
        </el-steps>

        <el-card shadow="never" class="info-card">
          <template #header>
            <div class="card-header-v3">
              <el-icon><Ticket /></el-icon>
              <span>订单基本信息</span>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">订单号:</span>
                <span class="info-value">{{ currentOrderDetail.orderNumber }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">当前状态:</span>
                <span class="info-value">
                  <el-tag :type="getStatusType(currentOrderDetail.status)" effect="light" size="small" round>
                    {{ getStatusText(currentOrderDetail.status) }}
                  </el-tag>
                </span>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <el-card shadow="never" class="info-card">
          <template #header>
            <div class="card-header-v3">
              <el-icon><Box /></el-icon>
              <span>地址与时间</span>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">配送地址:</span>
                <span class="info-value">{{ currentOrderDetail.mudidi3 }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">送货目的地:</span>
                <span class="info-value">{{ currentOrderDetail.zhongdian }}</span>
              </div>
            </el-col>
            <el-col :span="24">
               <div class="info-item">
                <span class="info-label">期望配送时间:</span>
                <span class="info-value">{{ currentOrderDetail.deliveryTime }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="orderDetailDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="orderDetailDialogVisible = false">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { List, Location, User, View, Ship, Ticket, Box } from '@element-plus/icons-vue'
import axios from "axios";
import {useUserStore} from "@/pinia/index.js";

// 模拟最新订单数据
const loading = ref(false)
const recentOrders = ref(
    [
      {
        orderNumber: '',
        status: "",
        deliveryTime: '',
        mudidi3: '',
        zhongdian:""
      }
    ]
)
//pinia得store
const userStore = useUserStore();
//首页查看所有\

const getOrderAll=(userId)=>{
  axios({
    url:"/UserApi/user/dingDanSel",
    method:"post",
    params:{userId:userId}
  }).then(res=>{
    recentOrders.value=res.data
    console.log(res.data)
  })
}
getOrderAll(userStore.getUserId)
const getStatusType = (status) => {
  const types = {
    0: 'info',
    1: 'warning',
    2: 'success',
    3: 'success',
    4: 'danger',
    5: 'primary'
  }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = {
    0: '待分配',
    1: '已分配',
    2: '配送中',
    3: '已完成',
    4: '已取消',
    5: '已支付'
  }
  return texts[status] || '未知状态'
}

const viewOrderDetail = (order) => {
  currentOrderDetail.orderNumber = order.orderNumber
  currentOrderDetail.status = order.status
  currentOrderDetail.deliveryTime = order.deliveryTime
  currentOrderDetail.mudidi3 = order.mudidi3
  currentOrderDetail.zhongdian = order.zhongdian
  orderDetailDialogVisible.value = true
}

// 订单详情对话框相关
const orderDetailDialogVisible = ref(false)
const currentOrderDetail = reactive({
  orderNumber: '',
  status: 0,
  deliveryTime: '',
  mudidi3: '',
  zhongdian:''
})
</script>

<style scoped>
@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';

.page-container {
  padding: 24px;
  background-color: #f0f2f5;
  min-height: 100vh;
}

/* New Welcome Card Styles */
.welcome-card-v2 {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.welcome-content-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.welcome-text-v2 h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #303133;
  margin-bottom: 16px;
}

.welcome-text-v2 p {
  font-size: 1.1rem;
  color: #606266;
  margin-bottom: 32px;
}

.welcome-image-v2 {
  flex-shrink: 0;
  width: 300px;
}

.welcome-image-v2 img {
  width: 100%;
  height: auto;
  display: block;
}

/* New Feature Card Styles */
.feature-card-v2 {
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  background-color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  text-align: center;
  border: none;
}

.feature-card-v2:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

.feature-content-v2 {
  padding: 24px;
}

.icon-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.feature-card-v2 .el-icon {
  font-size: 40px;
  color: #fff;
}

.icon-card-orders .icon-wrapper { background: linear-gradient(135deg, #FF9A8B 0%, #FF6A88 100%); }
.icon-card-address .icon-wrapper { background: linear-gradient(135deg, #2AF598 0%, #009EFD 100%); }
.icon-card-profile .icon-wrapper { background: linear-gradient(135deg, #FEE140 0%, #FA709A 100%); }


.feature-card-v2 h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.feature-card-v2 p {
  color: #909399;
  font-size: 1rem;
  min-height: auto;
}


.orders-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
}

:deep(.el-table) {
  border-radius: 8px;
}

:deep(.el-table th) {
  background-color: #fafafa !important;
}

:deep(.el-dialog) {
  border-radius: 12px;
}

:deep(.el-dialog__header) {
  padding: 16px 24px;
  background-color: #f7f8fa;
  border-bottom: 1px solid #ebeef5;
  border-radius: 12px 12px 0 0;
}

:deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 500;
}

/* --- V3 订单详情对话框的颠覆性改造 --- */
:deep(.el-dialog.order-detail-dialog-v3) {
  background-color: #f4f5f7;
  border-radius: 12px;
  box-shadow: none;
}

:deep(.order-detail-dialog-v3 .el-dialog__header) {
  padding: 18px 24px;
  margin: 0;
  border-bottom: 1px solid #e9e9eb;
}

:deep(.order-detail-dialog-v3 .el-dialog__title) {
  font-size: 20px;
  font-weight: 600;
  color: #1c1e21;
}

:deep(.order-detail-dialog-v3 .el-dialog__body) {
  padding: 0;
}

.dialog-content {
  padding: 20px;
  background-color: #f4f5f7;
}

.order-timeline {
  margin-bottom: 24px;
  background: #ffffff;
  padding: 20px 10px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.info-card {
  margin-bottom: 20px;
  border: 1px solid #e9e9eb;
  border-radius: 8px !important;
  background-color: #ffffff;
}
.info-card:last-child {
  margin-bottom: 0;
}

.card-header-v3 {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}
.card-header-v3 .el-icon {
  margin-right: 8px;
  font-size: 18px;
  color: #409EFF;
}

.info-item {
  display: flex;
  align-items: flex-start;
  padding: 10px 0;
  font-size: 14px;
  line-height: 1.6;
}
.info-label {
  width: 120px;
  flex-shrink: 0;
  color: #8c8c8c;
  text-align: right;
  margin-right: 12px;
}
.info-value {
  color: #262626;
  font-weight: 500;
}

:deep(.order-detail-dialog-v3 .el-dialog__footer) {
  padding: 12px 24px;
  text-align: right;
  background-color: #ffffff;
  border-top: 1px solid #e9e9eb;
  border-radius: 0 0 12px 12px;
}
</style> 